<template>
    <div>
        <a-page-header
                style="border: 1px solid rgb(235, 237, 240)"
                title="PROCUREMENT"
                sub-title="采购单申请"
        />
        <a-form style="margin: 30px 200px" layout="vertical" :model="procurementBill">
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            v-bind="validateInfos.title"
                            label="标题"
                            name="title">
                        <a-input v-model:value="procurementBill.title"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.companyId"
                            label="合作公司"
                            name="companyId">
                        <a-select
                                ref="select"
                                v-model:value="procurementBill.companyId"
                                placeholder="请选择"
                                :options="companyList"
                                @change="handlerSelected"
                                :field-names="{label:'name',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.goodsId"
                            label="出库商品"
                            name="goodsId">
                        <a-select
                                ref="select"
                                :disabled="goodsList.length == 0"
                                v-model:value="procurementBill.goodsId"
                                placeholder="请选择"
                                :options="goodsList"
                                :field-names="{label:'name',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item
                            v-bind="validateInfos.quantity"
                            label="采购数量"
                            name="quantity">
                        <a-input-number v-model:value="procurementBill.quantity"
                                        :disabled="procurementBill.goodsId == ''"
                                        :min="1"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item
                            v-bind="validateInfos.remark"
                            label="采购详情"
                            name="remark">
                        <a-textarea :auto-size="{minRows:3}" v-model:value="procurementBill.remark"/>
                    </a-form-item>
                </a-col>
            </a-row>

            <a-row :gutter="16">
                <a-col :span="12">
                    <a-form-item
                            v-bind="validateInfos.personnelman"
                            label="请选择审批的人事专员"
                            name="personnelman">
                        <a-select
                                ref="select"
                                v-model:value="procurementBill.personnelman"
                                placeholder="请选择"
                                :options="personnelmanList"
                                :field-names="{label:'username',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item
                            v-bind="validateInfos.manger"
                            label="请选择审批的经理"
                            name="manger">
                        <a-select
                                ref="select"
                                v-model:value="procurementBill.manger"
                                placeholder="请选择"
                                :options="mangerList"
                                :field-names="{label:'username',value:'id'}"
                        ></a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="16">
                <a-col :span="24">
                    <a-form-item>
                        <a-space>
                            <a-button type="primary" @click="submitOk">
                                提交申请
                            </a-button>
                            <a-button type="default" @click="resetFields">
                                重置
                            </a-button>
                        </a-space>

                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message,Form} from 'ant-design-vue'
    import {SessionStorage} from '../../../public/session-storage.js'
    import {useRouter} from 'vue-router'
    export default {
        name: "orders-procurementApply",
        setup() {
            const procurementBill = ref({
                title: '',
                companyId: '',
                goodsId: '',
                quantity: '',
                remark: '',
                personnelman: undefined,
                manger: undefined,
            })
            const userList = ref([])
            const companyList = ref([])
            const goodsList = ref([])
            const personnelmanList = ref([])
            const mangerList = ref([])
            const loginUser = ref({})
            const router = useRouter()
            const useForm = Form.useForm
            const {validate, validateInfos, resetFields} = useForm(procurementBill, {
                title: [{required: true, message: '标题不能为空', trigger: ['submit','change']}],
                companyId: [{required: true, message: '请选择合作公司', trigger: ['submit','change']}],
                goodsId: [{required: true, message: '请合作公司旗下商品', trigger: ['submit','change']}],
                quantity: [{required: true, message: '请输入商品数量', trigger: ['submit','change']}],
                remark: [{required: true, message: '采购详情不能为空', trigger: ['submit','change']}],
                personnelman: [{required: true, message: '请选择审批的人事专员', trigger: ['submit','change']}],
                manger: [{required: true, message: '请选择审批的经理', trigger: ['submit','change']}],
            })

            const submitOk = () => {
                validate().then(()=>{
                    procurementBill.value.userId = loginUser.value.id
                    procurementBill.value.state = 0

                    axios.post('/procurementProcess/startProcurement',procurementBill.value).then(rs=>{
                        console.log("申请结果",rs)
                        if (rs.data.code == 200){
                            message.success("采购申请提交成功")
                            router.push('/orders/procurement')
                        }else {
                            message.error(rs.data.message)
                        }
                    })
                }).catch(()=>{
                    console.log("校验失败")
                })
            }

            const handlerSelected = (value) =>{
                procurementBill.value.goodsId = ''
                axios.get('/goods/queryByCompanyId/' + value).then(rs=>{
                    goodsList.value = rs.data.data
                })
            }

            onMounted(()=>{
                loginUser.value = SessionStorage.get('loginUser')
                axios.get('/user/queryAll').then(rs=>{
                    userList.value = rs.data.data
                    userList.value.forEach(val=>{
                        if (val.roleId == 4){
                            personnelmanList.value.push(val)
                        }
                        if (val.roleId == 1){
                            mangerList.value.push(val)
                        }
                    })
                })
                axios.get('/company/queryAll').then(rs=>{
                    companyList.value = rs.data.data
                })
            })
            return {
                procurementBill,
                submitOk,
                validateInfos,
                resetFields,
                personnelmanList,
                mangerList,
                goodsList,
                companyList,
                handlerSelected,
            }
        }
    }
</script>

<style scoped>

</style>